<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/menu1.css" rel="stylesheet"  />
		<link href="css/menu3.css" rel="stylesheet"/>
	</head>

	<body>
		<!-- 缩放式侧滑（类手机QQ） -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
		  <!-- 菜单容器 -->
		  <aside class="mui-off-canvas-left mui-transitioning" id="offCanvasSide">
		    <div class="mui-scroll-wrapper">
		      <div class="mui-scroll">
		        <!-- 菜单具体展示内容 -->
		        <header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">Avital</h1>
		</header>
		
		<div class="mui-content">
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="img/menu1.png">
			            <div class="mui-media-body">
			                Yarosav Zaitsev
			                <p class="mui-ellipsis"><span class="mui-icon mui-icon-location-filled"></span>Kazan Russia</p>
			            </div>
			        </a>
			    </li>
			</ul>
			
			<ul class="mui-table-view">
			        <li class="mui-table-view-cell">
			                Activity
			        </li>
			        <li class="mui-table-view-cell">
			                 Friends
			        </li>
			        <li class="mui-table-view-cell">
			                 Message <span class="mui-badge">5</span>
			        </li>
			        <li class="mui-table-view-cell">
			                 Events
			        </li>
			        <li class="mui-table-view-cell">
			                 Settings
			        </li>
			    </ul>
			    
			<ul class="mui-table-view">
			        <li class="mui-table-view-cell">
			                Followers<span class="number">4258</span>
			        </li>
			        <li class="mui-table-view-cell">
			                Following<span class="number">1097</span>
			        </li>
			</ul>
			
			<div class="footer">
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell">
				    	Log Out
				    </li>
			    </ul>
			
			
		</div>
		      </div>
		    </div>
		  </aside>
		  <!-- 主页面容器 -->
		  <div class="mui-inner-wrap mui-transitioning">
		    <!-- 主页面标题 -->
		    
		    <div class="mui-content mui-scroll-wrapper">
		      <div class="mui-scroll">
		        <!-- 主界面具体展示内容 -->
		        <header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">Search</h1>
	</header>
	
	<div class="mui-content">
		<div class="mui-input-row mui-search">
		    <input type="search" class="mui-input-clear" placeholder="Boots Free">
		</div>
		
		<ul class="mui-table-view">
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <div class="box">
		        		<img class="mui-media-object mui-pull-left" src="img/1.png">
		        	</div>
		            <div class="mui-media-body">
		                <h4>NIKE</h4>
		                <p class="mui-ellipsis">Free 4.0 Fryknit</p>
		                <span class="yuan">99$</span>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <div class="box">
		        		<img class="mui-media-object mui-pull-left" src="img/2.png">
		        	</div>
		            <div class="mui-media-body">
		                <h4>NIKE</h4>
		                <p class="mui-ellipsis">Free 2.0 Print</p>
		                <span class="yuan">188$</span>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		            <div class="box">
		        		<img class="mui-media-object mui-pull-left" src="img/3.png">
		        	</div>
		            <div class="mui-media-body">
		                <h4>NIKE</h4>
		                <p class="mui-ellipsis">Free Sport JVX</p>
		                <span class="yuan">255$</span>
		            </div>
		        </a>
		    </li>
		    <li class="mui-table-view-cell mui-media">
		        <a href="javascript:;">
		        	<div class="box">
		        		<img class="mui-media-object mui-pull-left" src="img/4.png">
		        	</div>
		            <div class="mui-media-body">
		                <h4>NIKE</h4>
		                <p class="mui-ellipsis">Free Fryknit N SW Trial</p>
		                <span class="yuan">390$</span>
		            </div>
		        </a>
		    </li>
		</ul>
		
		<div class="footer">
		    <h5>SEE ALL RESULTS</h5>
		</div>
	</div>
		      </div>
		    </div>  
		    <div class="mui-off-canvas-backdrop"></div>
		  </div>
		</div>
		
		
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>